<template>
  <div class="dashboard-container">
    <!-- 页面标题 -->
    <div class="dashboard-header">
      <h1 class="dashboard-title">积分管理后台</h1>
      <p class="dashboard-subtitle">积分数据统计与分析</p>
    </div>

    <!-- 数据卡片区域 -->
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-title">
          <span>提现支出总额(元)</span>
          <span class="card-icon">💰</span>
        </div>
        <div class="stat-value">10,000</div>
        <div class="stat-extra">
          <span>剩余余额：1,000,000</span>
          <button class="budget-btn">设置预算</button>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-title">
          <span>本月积分提现额(元)</span>
          <span class="card-icon">📈</span>
        </div>
        <div class="stat-value">1,000 <span class="trend-up">25%</span></div>
        <div class="stat-extra">
          <span>较上月</span>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-title">
          <span>积分待提现审核数</span>
          <span class="card-icon">⏳</span>
        </div>
        <div class="stat-value">10 <span class="trend-neutral">0%</span></div>
        <div class="stat-extra">
          <span>较上月</span>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-title">
          <span>信用分待审核数</span>
          <span class="card-icon">⏳</span>
        </div>
        <div class="stat-value">10 <span class="trend-neutral">0%</span></div>
        <div class="stat-extra">
          <span>较上月</span>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 - 左右布局 -->
    <div class="main-content">
      <!-- 左侧图表区域 -->
      <div class="left-column">
        <div class="chart-container">
          <div class="chart-header">
            <h3>信用分申请统计</h3>
            <div class="time-filter">
              <button 
                v-for="period in timePeriods" 
                :key="period" 
                :class="['time-btn', activePeriod === period ? 'active' : '']"
                @click="activePeriod = period"
              >
                {{ period }}
              </button>
            </div>
          </div>
          <div class="chart-wrapper">
            <div ref="creditChart" class="chart"></div>
          </div>
        </div>
        
        <div class="chart-container">
          <div class="chart-header">
            <h3>积分获取统计</h3>
            <div class="time-filter">
              <button 
                v-for="period in timePeriods" 
                :key="period" 
                :class="['time-btn', activePeriod === period ? 'active' : '']"
                @click="activePeriod = period"
              >
                {{ period }}
              </button>
            </div>
          </div>
          <div class="chart-wrapper">
            <div ref="pointsChart" class="chart"></div>
          </div>
        </div>
      </div>

      <!-- 右侧区域 -->
      <div class="right-column">
        <!-- 消息通知 -->
        <div class="notification-container">
          <div class="section-header">
            <h3>消息通知</h3>
            <a href="#" class="view-more">查看更多</a>
          </div>
          <div class="notification-list">
            <div 
              v-for="(notification, index) in notifications" 
              :key="index" 
              class="notification-item"
              :class="{ unread: !notification.read }"
            >
              <div class="notification-icon">
                <span v-if="notification.type === 'warning'">⚠️</span>
                <span v-else-if="notification.type === 'info'">ℹ️</span>
                <span v-else>📢</span>
              </div>
              <div class="notification-content">
                <div class="notification-title">{{ notification.title }}</div>
                <div class="notification-desc">{{ notification.description }}</div>
              </div>
              <div class="notification-time">{{ notification.time }}</div>
              <div class="notification-action">
                <button 
                  v-if="!notification.read" 
                  class="mark-read-btn"
                  @click="markAsRead(index)"
                >
                  标记已读
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 积分排名 -->
        <div class="ranking-section">
          <div class="section-header">
            <h3>积分排名</h3>
            <a href="#" class="view-more">查看更多</a>
          </div>
          <div class="ranking-table">
            <table>
              <thead>
                <tr>
                  <th>排名</th>
                  <th>账号</th>
                  <th>总积分</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(user, index) in rankingData" :key="index">
                  <td>排名 {{ index + 1 }}</td>
                  <td>{{ user.account }}</td>
                  <td>{{ user.points.toLocaleString() }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, ref, nextTick } from 'vue';

export default {
  name: 'PointsDashboard',
  setup() {
    const creditChart = ref(null);
    const pointsChart = ref(null);
    const activePeriod = ref('近7天');
    const timePeriods = ['近7天', '近半年', '近一年'];
    
    const rankingData = ref([
      { account: '152645847851526', points: 12000 },
      { account: '152645847851526', points: 12000 },
      { account: '152645847851526', points: 12000 },
      { account: '152645847851526', points: 12000 },
      { account: '152645847851526', points: 12000 }
    ]);

    // 消息通知数据
    const notifications = ref([
      {
        title: '积分提现通知',
        description: '您有一条新的积分提现申请需要处理',
        time: '10分钟前',
        type: 'warning',
        read: false
      },
      {
        title: '信用分通知',
        description: '您有一条新的信用分申请需要审核',
        time: '1小时前',
        type: 'info',
        read: true
      },
      {
        title: '积分通知',
        description: '用户完成积分任务，获得100积分',
        time: '3小时前',
        type: 'info',
        read: true
      },
      {
        title: '积分提现通知',
        description: '您有一条新的积分提现申请需要处理',
        time: '5小时前',
        type: 'warning',
        read: false
      },
      {
        title: '信用分通知',
        description: '您有一条新的信用分申请需要审核',
        time: '昨天',
        type: 'info',
        read: true
      },
      {
        title: '积分通知',
        description: '用户完成积分任务，获得200积分',
        time: '昨天',
        type: 'info',
        read: true
      }
    ]);

    // 标记消息为已读的方法
    const markAsRead = (index) => {
      notifications.value[index].read = true;
    };

    // 初始化图表
    const initCharts = () => {
      nextTick(() => {
        // 信用分申请统计图表
        const creditChartInstance = window.echarts.init(creditChart.value);
        creditChartInstance.setOption({
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['8.1', '8.2', '8.3', '8.4', '8.5', '8.6', '8.7']
          },
          yAxis: {
            type: 'value',
            name: '数量',
            max: 200,
            interval: 50
          },
          series: [
            {
              name: '申请数量',
              type: 'line',
              smooth: true,
              lineStyle: {
                color: '#5470c6',
                width: 3
              },
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: 'rgba(84, 112, 198, 0.3)'
                  }, {
                    offset: 1, color: 'rgba(84, 112, 198, 0.1)'
                  }]
                }
              },
              data: [120, 132, 101, 134, 90, 150, 170]
            }
          ]
        });

        // 积分获取统计图表
        const pointsChartInstance = window.echarts.init(pointsChart.value);
        pointsChartInstance.setOption({
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['8.1', '8.2', '8.3', '8.4', '8.5', '8.6', '8.7']
          },
          yAxis: {
            type: 'value',
            name: '数量',
            max: 2000,
            interval: 500
          },
          series: [
            {
              name: '积分获取数量',
              type: 'line',
              smooth: true,
              lineStyle: {
                color: '#91cc75',
                width: 3
              },
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: 'rgba(145, 204, 117, 0.3)'
                  }, {
                    offset: 1, color: 'rgba(145, 204, 117, 0.1)'
                  }]
                }
              },
              data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
          ]
        });

        // 响应窗口大小变化
        window.addEventListener('resize', () => {
          creditChartInstance.resize();
          pointsChartInstance.resize();
        });
      });
    };

    onMounted(() => {
      initCharts();
    });

    return {
      creditChart,
      pointsChart,
      activePeriod,
      timePeriods,
      rankingData,
      notifications,
      markAsRead
    };
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}

.dashboard-container {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding: 20px;
}

.dashboard-header {
  margin-bottom: 24px;
}

.dashboard-title {
  font-size: 24px;
  font-weight: 600;
  color: #1f2d3d;
  margin-bottom: 8px;
}

.dashboard-subtitle {
  color: #8492a6;
  font-size: 14px;
}

/* 数据卡片样式 */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.stat-title {
  font-size: 14px;
  color: #8492a6;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-icon {
  font-size: 20px;
}

.stat-value {
  font-size: 28px;
  font-weight: 600;
  color: #1f2d3d;
  margin-bottom: 8px;
}

.stat-extra {
  font-size: 12px;
  color: #8492a6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.trend-up {
  color: #f56c6c;
  font-size: 16px;
  font-weight: 600;
}

.trend-down {
  color: #67c23a;
  font-size: 16px;
  font-weight: 600;
}

.trend-neutral {
  color: #8492a6;
  font-size: 16px;
  font-weight: 600;
}

.budget-btn {
  background: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.3s;
}

.budget-btn:hover {
  background: #66b1ff;
}

/* 主要内容区域 - 左右布局 */
.main-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

/* 左侧图表区域 */
.left-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chart-container {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  flex: 1;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1f2d3d;
}

.time-filter {
  display: flex;
  gap: 8px;
}

.time-btn {
  background: #f5f7fa;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 12px;
  color: #606266;
  cursor: pointer;
  transition: all 0.3s;
}

.time-btn.active,
.time-btn:hover {
  background: #409eff;
  color: white;
  border-color: #409eff;
}

.chart-wrapper {
  height: 300px;
}

.chart {
  width: 100%;
  height: 100%;
}

/* 右侧区域 */
.right-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.notification-container, .ranking-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.notification-container {
  flex: 1;
}

.ranking-section {
  flex: 1;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1f2d3d;
}

.view-more {
  font-size: 14px;
  color: #409eff;
  text-decoration: none;
}

.view-more:hover {
  text-decoration: underline;
}

/* 消息通知样式 */
.notification-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 300px;
  overflow-y: auto;
}

.notification-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item.unread {
  background-color: #f8f9fa;
  border-radius: 4px;
  padding: 12px;
  margin: 0 -12px;
}

.notification-icon {
  font-size: 20px;
  margin-right: 12px;
  width: 24px;
  text-align: center;
}

.notification-content {
  flex: 1;
  margin-right: 12px;
}

.notification-title {
  font-weight: 600;
  color: #1f2d3d;
  margin-bottom: 4px;
  font-size: 14px;
}

.notification-desc {
  color: #8492a6;
  font-size: 12px;
  line-height: 1.4;
}

.notification-time {
  color: #8492a6;
  font-size: 12px;
  white-space: nowrap;
  margin-right: 12px;
}

.notification-action {
  white-space: nowrap;
}

.mark-read-btn {
  background: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.3s;
}

.mark-read-btn:hover {
  background: #66b1ff;
}

/* 排名表格样式 */
.ranking-table {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #eaeef2;
}

th {
  background-color: #f5f7fa;
  color: #5a5e66;
  font-weight: 600;
  font-size: 14px;
}

td {
  color: #606266;
  font-size: 14px;
}

tr:hover td {
  background-color: #f5f7fa;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .stats-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .main-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .stats-cards {
    grid-template-columns: 1fr;
  }
  
  .dashboard-container {
    padding: 10px;
  }
  
  .notification-item {
    flex-wrap: wrap;
  }
  
  .notification-time {
    margin-left: 36px;
    margin-top: 4px;
  }
  
  .notification-action {
    margin-left: 36px;
    margin-top: 8px;
  }
}
</style>
